<template>
    <div>
        <div>
            <el-dialog class="nyDialog" :visible.sync="is_dialog_show" width="42%" :close-on-click-modal="false"
                :before-close="() => { this.close(); }">
                <div class="overflow-hidden w-full h-full flex flex-col items-center" style="border-radius:4px;">
                    <div class="w-full h-w48 flex items-center px-w20 justify-between bg-caux text-white">
                        <div class="text-f14">创建批次</div>
                        <i class="el-icon-circle-close   cursor-pointer" @click.stop="close()"></i>
                    </div>
                    <div class="flex flex-col w-w8/12 ">
                        <div class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                            <div class=" w-w1/4 text-right pr-w20">批次名称：</div>
                            <el-input class="w-w3/4" placeholder="请输入内容" v-model="m_batch.name" clearable>
                            </el-input>
                        </div>
                        <div class="flex flex-row items-center  w-full min-h-w50 leading-w50 text-c3 text-f16   mt-w30">
                            <div class=" w-w1/4 text-right pr-w20">选择商品：</div>
                            <el-select class="w-w3/4" v-model="m_batch.goodesId" placeholder="请选择">
                                <el-option v-for="item in s_goods.list_goods_dic" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                            <div class=" w-w1/4 text-right pr-w20">有效时间：</div>
                            <el-select class="w-w3/4" v-model="m_batch.termValidityDay" placeholder="请选择">
                                <el-option label="1天" :value="1"> </el-option>
                                <el-option label="7天" :value="7"> </el-option>
                                <el-option label="10天" :value="10"> </el-option>
                                <el-option label="30天" :value="30"> </el-option>
                            </el-select>
                        </div>
                        <div class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                            <div class=" w-w1/4 text-right pr-w20">生成数量：</div>
                            <el-input-number class="w-w3/4" placeholder="请输入内容" v-model="m_batch.num" :min="1">
                            </el-input-number>
                        </div>
                    </div>
                    <div class="w-full flex flex-row justify-center mt-w50 mb-w30">
                        <el-button class=" w-w1/5 mr-w20" @click="close">取消</el-button>
                        <el-button class=" w-w1/5 bg-cmain_hover" type="primary" @click="actionSubmit">确定</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import nyMessageToast from "@/utils/NYMessageToast";
import DZModelBatch from "@/views/优惠券管理/model/DZModelBatch";
import DZModelCompany from "@/views/公司管理/model/DZModelCompany";
import DZServiceGoods from "@/views/商品管理/service/DZServiceGoods";
import DZServiceAssess from "@/views/测评管理/service/DZServiceAssess";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";

@Component
export default class UiDialogAddCoupon extends Vue {

    @Prop() is_showDialog;

    is_dialog_show = false;

    m_batch = new DZModelBatch();

    s_goods = new DZServiceGoods();


    created() { }

    mounted() {
        this.s_goods.net_list_goods_dic();
    }

    beforeDestroy() { }

    close() {
        this.$emit('nydialog_closed', '');
        this.initDialog();
    }
    initDialog() {
        this.m_batch = new DZModelBatch();
        this.is_dialog_show = false;
    }

    @Watch("is_showDialog")
    watchShowDialog(value: any, oldValue: string) {
        this.is_dialog_show = value;
    }

    actionSubmit() {
        if (this.m_batch.name.nyIsEmpty()) {
            nyMessageToast.warning("请输入批次名称");
            return;
        }
        if (!this.m_batch.goodesId) {
            nyMessageToast.warning("请绑定商品");
            return;
        }
        if ((!this.m_batch.termValidityDay) || this.m_batch.termValidityDay == 0) {
            nyMessageToast.warning("请输入有效的有效时间");
            return;
        }
        if ((!this.m_batch.num) || this.m_batch.num == 0) {
            nyMessageToast.warning("请输入生成数量");
            return;
        }
        this.$emit('nydialog_submit', this.m_batch);
        this.initDialog();
    }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
    border-radius: 4px !important;
    border: none;
}

/deep/.el-dialog__body {
    text-align: left;
    min-height: 22vw;
    padding: 0px;
}

/deep/ .dialog-tips {
    margin-top: 0 !important;
}

/deep/ .el-dialog__footer {
    text-align: right;
}

/deep/.el-dialog__header {
    height: 0px;
    padding: 0;
}

/deep/ .el-icon-close:before {
    content: '';
}

.nyDialog {
    padding-top: 10vh;
    background: none;
}
</style>
